<template>
  <div id="data-preview-table" class="gis-data-preview">
    <gis-data-setting
      v-if="previewedDatasetOfGis && previewedDatasetOfGis.length > 0"
      :active-table="activeTableFileNameOfGis"
    />
    <!-- 单表 -->
    <!-- gis 表格文件 excel csv 导入  v-if="previewDataWithTypeSemantic && previewDataWithTypeSemantic.length > 0" -->
    <template v-if="uploadType === 'table'">
      <!-- 多表 -->
      <a-tabs
        v-if="previewedDatasetOfGis && previewedDatasetOfGis.length > 1"
        v-model="activeTableFileNameOfGis"
        type="card"
        @change="changeTable"
      >
        <a-tab-pane
          v-for="table in previewedDatasetOfGis"
          :key="table.fileName"
          :tab="table.name"
        >
          <data-preview-table
            :head="table.head"
            :data="table.data"
            data-type="table"
            @changeColType="changeColType"
            @change-semantic="changeColSemantic"
          />
        </a-tab-pane>
      </a-tabs>
      <!-- 单表 -->
      <data-preview-table
        v-if="previewedDatasetOfGis && previewedDatasetOfGis.length == 1"
        :head="previewedDatasetOfGis[0].head"
        :data="previewedDatasetOfGis[0].data"
        data-type="gis"
        @changeColType="changeColType"
        @change-semantic="changeColSemantic"
      />
    </template>
    <template v-else>
      <div class="shapefile-prompt-message">
        <img src="@/assets/view/dataview-empty.svg" />
        <span>shapefile文件导入暂不支持导入数据预览！</span>
      </div>
    </template>
  </div>
</template>

<script lang="ts">
/**
 * Gis 数据预览
 * @author Jinhui Hou
 */
import { Component, Vue } from 'vue-property-decorator'
import DataPreviewTable from '@/components/data/DatasetPreviewTable.vue'
import GisDataSetting from '@/components/data/data-information/setting/GisDataSetting.vue'
import DataUploadStore from '@/store/modules/data-upload'

@Component({
  components: {
    GisDataSetting,
    DataPreviewTable,
  },
})
export default class GisDataPreview extends Vue {
  public get activeTableFileNameOfGis() {
    return DataUploadStore.activeTableFileNameOfGis
  } // 上传类型 table | shapefile
  public get uploadType() {
    return DataUploadStore.uploadType
  }
  // 预览数据
  public get previewedDatasetOfGis() {
    return DataUploadStore.previewedDatasetOfGis
  }
  // 脱敏配置
  public get haveSetDesensitization() {
    return DataUploadStore.haveSetDesensitization
  }

  /**
   * tab更换当前编辑的上传文件的文件名
   */
  public changeTable(fileName: string) {
    DataUploadStore.setActiveTableFileNameOfGis(fileName)
  }

  /**
   * 修改数据列的类型
   */
  public changeColType(typeInfo: { index: number; type: string }) {
    const { index, type } = typeInfo
    // 当前激活的表
    const indexTable = this.previewedDatasetOfGis.findIndex(
      (item: any) => item.fileName === this.activeTableFileNameOfGis
    )
    this.previewedDatasetOfGis[indexTable].head[index].type = type
  }

  /**
   * 语义推断与修改
   */
  public changeColSemantic(semanticInfo: { index: number; semantic: string }) {
    const { index, semantic } = semanticInfo
    // 当前激活的表
    const indexTable = this.previewedDatasetOfGis.findIndex(
      (item: any) => item.fileName === this.activeTableFileNameOfGis
    )
    this.previewedDatasetOfGis[indexTable].head[index].semantic = semantic
  }

  /**
   * 表头文字调整
   * @param tableIndex:number 第几个列
   */
  public handleTitleChange({
    index: columnIndex,
    newValue,
    oldValue,
  }: {
    index: number
    newValue: string
    oldValue: string
  }) {
    this.previewedDatasetOfGis.newHead[columnIndex].name = newValue
    // 处理返回来的数据
    this.previewedDatasetOfGis.data = this.previewedDatasetOfGis.data.map(
      (item: any) => {
        const newData = {
          ...item,
          [newValue]: item[oldValue],
        }
        delete newData[oldValue]
        return newData
      }
    )
  }
}
</script>
<style lang="less" scoped>
.gis-data-preview {
  .shapefile-prompt-message {
    align-items: center;
    display: flex;
    flex-direction: column;
    padding: 12px 0;
    text-align: center;

    > span {
      margin-top: 12px;
    }
  }
}
</style>
